<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染_总结练习</title>
    <script type="text/javascript" src="../js/vue.js"></script> <!-- vue引入 -->

    <script>
        Vue.config.productionTip=false; //阻止vue在启动时产生提示
        const vm = new Vue({
            data:{
                student:{
                    name: "段永红",
                    age: 18,
                    hobby:['抽烟',"喝酒","打麻将"], //爱好
                    friends: [ //朋友
                        {name: "杨幂", age: 35},
                        {name: "周杰伦", age: 25},
                    ]
                }
            },
            methods: {
                addSex(event){ //添加一个性别属性、事件
                    //Vue.set(this.student, 'sex', '男'); //方式1
                    this.$set(this.student, 'sex', '男'); //方式2
                },
                addFriend(event){ //最前面添加一个朋友
                    this.student.friends.unshift({"name":"周冬雨","age":18});
                },
                updateFirstFriendName(event){ //修改第一个朋友信息
                    this.student.friends[0].name="张三";
                    this.student.friends[0].age=5;
                },
                addHobby(event){ //添加一个爱好
                    this.student.hobby.push('美食');
                },
                updateHobby(event){
                    //this.student.hobby[0] = "开车1"; //方式1，该方式在vue2中不能直接响应到页面、但在vue3中已经解决
                    //this.student.hobby.splice(0,1,'开车2'); //方式2，vue2的修改方式, 下标0开始、删除1个元素、并追加元素(也可以追加多个)
                    //Vue.set(this.student.hobby, 0, '开车3'); //方式3, 替换数组下标0的数据
                    this.$set(this.student.hobby, 0, '开车4'); //方式4, 替换数组下标0的数据
                }

            },
        });

        window.onload = function() { 
            vm.$mount('#root');
        }
    </script>
</head>
<body>
    <!--
        Vue监视数据原理
            1.vue会监视data中所有层次的数据
            2.如何检测对象中的数据？
                通过setter实现监视，且要在new Vue时就传入要检测的数据。
                    (1)对象中后追加的属性，Vue默认不做响应式处理
                    (2)如需给添加的属性做响应式，请使用如下API：
                            Vue.set(target, propertyName|index, value) 或
                            vm.$set(target, propertyName|index, value)
             
            3.如何检测数组中的数据？
                通过包裹数组更新元素的方法实现，本质就是做了两件事：
                    (1)调用原生对应的方法对数组进行更新。
                    (2)重新解析模板,进而更新页面
            
            4.在Vue修改数组中的某个元素一定要用如下方法：
                    (1)使用这些API: push()、pop()、shift()、unshift()、splice()、sort()、reverse()
                    (2)Vue.set() 或 vm.$set()
            
            特别注意：Vue.set() 和 vm.$set() 不能给vm或vm的根数据对象添加属性！！！
                    如：Vue.set(vm._data, 'key', 'value'); 这样会报错的
                    正确用法：Vue.set(vm._data.student, 'key', 'value'); 必须是data里面的对象才可以
    -->

    <div id="root">
        <br>
        <button @click="student.age++">年龄+1岁</button><br><br>
        <button @click="addSex">添加性别属性，默认值：男</button>
        <button :disabled="!student.sex" @click="student.sex=student.sex=='男'?'女':'男'">修改性别</button><br><br>
        <button @click="addFriend">在列表首位添加一个朋友</button><br><br>
        <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button><br><br>
        <button @click="addHobby">添加一个爱好</button><br><br>
        <button @click="updateHobby">修改第一个爱好为：开车</button>

        <h3>姓名：{{student.name}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        <h3>爱好：</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
        </ul>
        <h3>朋友们：</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
</body>
</html>